<template>
  <view class="Global">
    <!-- 背景图片铺满 -->
    <!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
    <bgImage></bgImage>
    <!-- <view class="personnel" :style="{'height':tarbarHeight+'px'}">
      <image @click="backOnClick" src="../../../static/logo.png" class="backImg" mode=""></image>
      <text class="title">{{personnelInfo}}</text>
    </view> -->


    <MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

    <!-- 提示信息 -->
    <view class="tipsInfo">
<!--      <text class="tipsInfoStyle">{{ tipsInfo }}</text>-->
<!--      <text @click="AddData()" class="updateInfoStyle">{{ login }}</text>-->
<!--      <text @click="refreshClick()" class="updateInfoStyle">{{ updateInfo }}</text>-->
    </view>


    <!-- 列表标题 -->
    <view class="titleStyle">
        <view class="titleStyleNum" >
          <text class="contentListItemLeftImgText" v-if="selectAll==false"></text>
          <image class="contentListItemLeftImg" v-if="selectAll==true" src="/static/xuanzhong.png"
                 mode="scaleToFill"></image>
        </view>
      <text class="titleStyleName">扎号</text>
      <text class="titleStyleSerial">数量</text>
      <text class="titleStyleName">尺码</text>
      <text class="titleStyleName">颜色</text>
      <text class="titleStyleName">床号</text>
<!--颜色-->
    </view>
    <!-- 列表内容 -->



    <scroll-view scroll-y="true" class="titleStyleTitle" @scrolltolower="scrolltolowerClick">

      <view v-for="(item,index) in listData" @click="clickItem(item,index)">
        <view class="titleStyleList" v-if="index%2==0">

          <text class="contentListItemLeftImgText" v-if="item.checked==false"></text>
          <image class="contentListItemLeftImg" v-if="item.checked==true" src="/static/xuanzhong.png"
                 mode="scaleToFill"></image>

          <text class="titleStyleNumList">{{ item.bundleCode }}</text>
          <text class="titleStyleNumList">{{ item.quantity }}</text>
          <text class="titleStyleSerialList">{{ item.sizes }}</text>
          <text class="titleStyleSerialList">{{ item.colors }}</text>
          <text class="titleStyleSerialList">{{ item.batchs }}</text>
<!--          <text class="titleStyleSerialList" @click="listItemClick(item)">操作</text>-->
        </view>
        <view class="titleStyleListElse" v-if="index%2!=0">

          <text class="contentListItemLeftImgText" v-if="item.checked==false"></text>
          <image class="contentListItemLeftImg" v-if="item.checked==true" src="/static/xuanzhong.png"
                 mode="scaleToFill"></image>

          <text class="titleStyleNumList">{{ item.bundleCode }}</text>
          <text class="titleStyleNumList">{{ item.quantity }}</text>
          <text class="titleStyleSerialList">{{ item.sizes }}</text>
          <text class="titleStyleSerialList">{{ item.colors }}</text>
          <text class="titleStyleSerialList">{{ item.batchs }}</text>
<!--          <text class="titleStyleSerialList" @click="listItemClick(item)">操作</text>-->

        </view>

        <view class="line"></view>
      </view>

    </scroll-view>


    <view class="loginContent">

<!--      <button @click="AddData()" style="color:#ffffff" class="login" type="default">{{ login }}</button>-->
      <button @click="sendDataToParent()" style="color:#ffffff" class="login" type="default">确定</button>
    </view>




    <!-- 点击列表弹出-->
    <uni-popup ref="popupBag" type="bottom">
      <view class="bagDetail">
        <text class="bagDetailUpadte" @click="updateData()">修改</text>
        <view class="lineBg"></view>
        <!-- <text class="bagDetailDelete" @click="AddData()">新增</text>
    <view class="lineBg"></view> -->
        <text class="bagDetailDelete" @click="deleteData()">删除</text>
        <view class="lineBg1"></view>
        <text class="bagDetailCancel" @click="close()">取消</text>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import MyNav from '@/components/customnavbar.vue'
import bgImage from '@/components/backgroundImage.vue'
import {
  orderSplittingUpPage
} from '@/pages/api/api.js'

export default {
  components: {
    MyNav,
    bgImage
  },
  data() {
    return {
      title: '工序管理',
      isback: true,

      selectAll: false,
      personnelInfo: '工序管理',
      tops: 0,
      height: 0,
      tarbarHeight: 0,
      tipsInfo: 'Tips：点击对应行可进行修改或删除操作',
      updateInfo: '刷新',
      login: '新增',


      listData: [],

      // 列表单个数据
      listItemData: {},
      processManagerData: {
        storeId: '',
        tenantId: '',
        pageNum: '1', // 当前页
        pageSize: '50', //页码大小
      },

      isRefresh: false,
      selectList: [],
    }
  },
  onLoad: function(option) {
    let data = JSON.parse(decodeURIComponent(option.data));
    this.processManagerData.storeId = data.storeId
    this.processManagerData.tenantId = data.tenantId
    this.processManagerData.orderId = data.orderId
    this.selectList = data.selectList
    this.loadData()
  },
  onShow() {
    // 如果是提交状态返回isRefresh=1，才刷新页面，从详情过来无需刷新
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1];
    if (currPage.__data__.isRefresh) {
      // 重新获取数据
      console.log('获取数据');

      this.reUpload()
      // 每一次需要清除，否则会参数会缓存
      currPage.__data__.isRefresh = false
    }
  },
  methods: {
    sendDataToParent() {
      const pages = getCurrentPages();
      const parentPage = pages[pages.length - 2];
      // 触发父页面的事件
      parentPage.triggerEvent('parentMethod', this.checkedList);
      // 返回上一页面
      uni.navigateBack();

//     只返回选中的数据
      let listDataOne = this.listData.find((item) => {
        return item.checked == true;
      });
      console.log('111选择数据', listDataOne);
      // this.checkedList = this.listSizeData.filter((item, index) => item.id);
      uni.$emit("globleOrderSplittUpListEvent", {
        listDataOne: listDataOne
      })
    },
    // 滚动条滚动底部
    scrolltolowerClick(e) {
      console.log('滚动加载', this.totalPage, this.processManagerData.pageNum);

      if (this.totalPage > this.processManagerData.pageNum) {

        ++this.processManagerData.pageNum

        getOrderProcessList(this.processManagerData).then((res) => {
          // console.log('11获取数据成功', res);
          // console.log('221滚动条触底', res.code, (res.code == 200));
          if (res.code == 200) {
            // 列表累计
            this.listData = [...this.listData, ...res.rows]

            //获取数据的时候foreach循环一下，添加num
            this.listData.forEach((item, index) => {
              this.$set(item, 'num', index + 1)
              this.$set(item, 'checked', false)
            })
            if(this.selectList&&this.selectList.length>0){
              this.listSizeData.forEach(item=>{
                this.selectList.forEach(row=>{
                  if(item.id == row.id){
                    item.checked = true;
                  }
                })
              })
            }
            // this.listSizeData = this.listSizeData.concat(res.rows)
          }
          /* // console.log('3221滚动条触底', this.sizeManagerData.pageNum, this.listSizeData, this.listSizeData
            .length); */
        }).catch((err) => {
          // console.error('11获取数据失败', err);
        });
      } else {
        uni.showToast({
          title: '已加载完全部数据',
          icon: 'none'
        });
      }
    },
    // 重置数据
    reUpload() {
      // 重置数据
      this.listData = []
      // 表示自动刷新本页
      this.loadData()
    },

    // 刷新数据
    refreshClick() {
      this.reUpload()
      console.log('点击刷新');
    },
    // 加载数据
    loadData() {
      const app = getApp();
      this.processManagerData.storeId = app.globalData.storeId
      this.processManagerData.tenantId = app.globalData.tenantId
      // 重置
      this.processManagerData.pageNum = 1;

      orderSplittingUpPage(this.processManagerData).then((res) => {
        // console.log('11获取数据成功', res);
        if (res.code == 200) {
          this.totalPage = (res.total / this.processManagerData.pageSize)
          if (this.totalPage > 1) {
            ++this.totalPage
          }

          // 计算总页数
          this.totalPage = parseInt(this.totalPage)

          // this.listSizeData = this.listSizeData.concat(res.rows)
          this.listData = [...this.listData, ...res.rows]

          //获取数据的时候foreach循环一下，添加show=false
          this.listData.forEach((item, index) => {
            this.$set(item, 'num', index + 1)
            this.$set(item, 'checked', false)
          })
          if(this.selectList&&this.selectList.length>0){
            this.listSizeData.forEach(item=>{
              this.selectList.forEach(row=>{
                if(item.id == row.id){
                  item.checked = true;
                }
              })
            })
          }

        }
        // console.log('2211获取数据成功', res, this.totalPage, this.listSizeData.length);
      }).catch((err) => {
        // console.error('11获取数据失败', err);
      });
    },
    // 点击全选按键
    selectAllClick() {
      this.selectAll = !this.selectAll

      this.listData.forEach((item, index) => {


        if (this.selectAll) {
          item.checked = true
        } else {
          item.checked = false
        }

      })

    },

    // 点击子项事件
    clickItem(item, index) {

      this.deviceSelectNum = 0
      this.listData.forEach((item, itemIndex) => {

        if (index == itemIndex) {
          item.checked = true
        }else {
          item.checked = false
        }

        // if (item.checked == true) {
        //   this.deviceSelectNum = this.deviceSelectNum + 1
        // }

      })

      // if (this.listData.length == this.deviceSelectNum) {
      //   this.selectAll = true;
      // } else {
      //   this.selectAll = false;
      // }
    },
    // 新增数据
    AddData() {
      console.log('新增数据');
      uni.navigateTo({
        url: '/subPack/processmanagement/processManagerAdd/processManagerAdd',
        success: res => {},
        fail: () => {},
        complete: () => {}
      });
    },
    // 修改数据
    updateData() {
      console.log('修改数据', this.listItemData);
      uni.navigateTo({
        url: '/subPack/processmanagement/processManagerUpdate/processManagerUpdate?item=' +
            encodeURIComponent(JSON.stringify(this.listItemData)),
        success: res => {},
        fail: () => {},
        complete: () => {}
      });

      this.close()

    },
    //删除数据
    deleteData() {
      console.log('删除数据', this.listItemData);
      // 删除
      deleteProcessManager(this.listItemData.id).then((res) => {
        // console.log('新增数据', res);

        if (res.code == 200) {
          // 表示删除成功
          // 重置数据
          this.listData = []
          // 表示自动刷新本页
          this.loadData()

          // 关闭弹框

          this.close()

        }
        // 显示提示信息
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });

      }).catch((err) => {
        // console.log('新增失败', err);
      });
    },

    // 打开弹框
    open(e) {
      console.log('点了');
      this.$refs.popupBag.open('bottom')
      console.log('列表点击事件', e);
      this.listItemData = e


    },
    // 关闭弹框
    close() {
      this.$refs.popupBag.close()
    },
    // 列表点击事件
    listItemClick(e) {

      /* uni.navigateTo({
        url: '/pages//subPack/process/processTemplateUpdate/processTemplateUpdate',
        success: res => {},
        fail: () => {},
        complete: () => {}
      }); */
      this.open(e)
    },

    addClick() {

    },

    backOnClick() {
      uni.navigateBack({
        delta: 1
      });
      console.log('点击返回');
    }
  },
  onReady() {
    // 获取标题栏和状态栏高度
    uni.getSystemInfo({
      success: (e) => {
        this.tops = e.statusBarHeight;
        let custom = uni.getMenuButtonBoundingClientRect();
        this.height = custom.height + (custom.top - e.statusBarHeight) * 2;
        this.tarbarHeight = this.tops + this.height;
      }
    })

  }
}
</script>

<style>

  .contentListItemLeftImgText {
    display: flex;
    width: 30rpx;
    height: 30rpx;

    border-radius: 50%;
    border: 2px solid #999999;
    color: #FFFFFF;
    background-color: #FFFFFF;
    margin-left: 30rpx;
    margin-right: 30rpx;
  }

  .contentListItemLeftImg {
    display: flex;
    width: 30rpx;
    height: 30rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
  }
.lineBg {
  width: 100%;
  height: 1rpx;
  background: #F9FCFF;


}

.lineBg1 {
  width: 100%;
  height: 20rpx;
  background: #F9FCFF;
}

.bagDetailCancel {
  width: 100%;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;


}

.bagDetailDelete {
  width: 100%;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;

}

.bagDetailUpadte {
  width: 100%;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-radius: 20rpx 20rpx 0 0; */
  /* background-color: white; */
}

.bagDetail {
  width: 100%;
  height: 380rpx;

  border-radius: 50rpx 50rpx 0 0;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;


}

.loginContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 750rpx;
  background-color: #45A8FF;

}

.login {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
  width: 550rpx;
  height: 110rpx;

  border-radius: 30rpx;
  font-weight: 400;
  font-size: 36rpx;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;

  bottom: 60rpx;
  position: absolute;
  background: linear-gradient(90deg, #45A8FF, #0AE1C6);

}

.titleStyleNumList {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 100%;
  font-size: 24rpx;
  color: #333333;

  text-align: justifyLeft;
  font-style: normal;
  text-transform: none;
}

.titleStyleSerialList {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 100%;
  font-size: 24rpx;
  color: #333333;

  text-align: justifyLeft;
  font-style: normal;
  text-transform: none;
}

.titleStyleNameList {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42%;
  height: 100%;
  font-size: 24 rpx;
  color: #333333;

  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;


}

.titleStyleNum {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 23%;
  height: 100%;
  font-size: 24rpx;


  text-align: justifyLeft;
  font-style: normal;
  text-transform: none;
}

.titleStyleSerial {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 100%;
  font-size: 24rpx;

  color: #FFFFFF;
  text-align: justifyLeft;
  font-style: normal;
  text-transform: none;
}

.titleStyleName {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 100%;
  font-size: 24rpx;
  color: #FFFFFF;


  font-style: normal;


}

.line {
  width: 690 rpx;
  height: 1 rpx;
  background: #F9FCFF;

  margin-left: 30rpx;

}

.titleStyleTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 690rpx;
  height: 960rpx;
  background: #FFFFFF;
  border-radius: 0rpx 0rpx 30rpx 30rpx;

}

.titleStyle {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 690rpx;
  height: 80rpx;
  background: #0081FF;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  margin-top: 42rpx
}

.titleStyleList {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  width: 690rpx;
  height: 80rpx;

}

.titleStyleListElse {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  width: 690rpx;
  height: 80rpx;
  background: #F9FCFF;
}




.tipsInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 40rpx;
}

.tipsInfoStyle {
  font-size: 24rpx;
  color: #FF4E00;
  line-height: 80rpx;
  text-align: justifyLeft;
  font-style: normal;
  text-transform: none;
  margin-left: 30rpx;
}

.updateInfoStyle {
  width: 100rpx;
  height: 50rpx;
  background: #0081FF;
  border-radius: 30rpx;
  margin-right: 30rpx;
  font-size: 24rpx;
  align-items: center;
  color: white;
  display: flex;
  justify-content: center;

}

.imagepage {

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
</style>
